<template>
	<!-- 画布 -->
	<view class="cs-draw-x">
		<view class="cs-draw-util">
			<view class="cs-util-li" v-for="(item, index) in iconArr" :key='index' v-if="noteType == 1 || (noteType == 2 && index == 0)">
				<text :class="['iconfont ', item.icon, ' icon_opertion']" @click='clickUtil(item.title)'></text>
			</view>
		</view>
		<view class="cs-draw-canvas-x">
			<canvas canvas-id="canvas-id" class="cs-draw-canvas" @touchstart="start" @touchmove="move" @touchend="end" disable-scroll='true'></canvas>
		</view>
	</view>
</template>

<script>
	import config from 'common/config.js'
	var that;
	let xyArr = [] // 点击时的xy坐标 和 移动时的xy坐标
	export default {
		props: {
			isHistoryDraft: Boolean, // 草稿历史
			sid: String, //科目ID
			keyId: String, //试题ID或试卷ID
			question_typeid: String, //题型ID
			kind_type_id: String, // 试卷类型ID
			type: { //笔记类型  test试题 exam试卷
				type: String,
				default: ''
			},
			unid: { //笔记ID
				type: String,
				default: ''
			},
			bimg: { //画布背景
				type: String,
				default: ''
			}
		},
		data() {
			that = this;
			return {
				iconArr: [
					{title: 'close', icon: 'iconguanbi'},
					{title: 'del', icon: 'iconshanchu'},
					// {title: 'back', icon: 'iconshangyibu'},
					// {title: 'go', icon: 'iconxiayibu'},
					{title: 'save', icon: 'iconduigou'}
				],
				canvas_w: 0, // 手机设备的宽度
				canvas_h: 0, // 手机设备的高度
				stuId: uni.getStorageSync('userInfo').id, //个人ID
				noteType: uni.getStorageSync('noteType'), //1家长 2孩子 
			}
		},
		created() {
			if(this.noteType == 2) {
				this.stuId = uni.getStorageSync('currentChild').student_id;
			}
		},
		methods: {
			// 工具条事件
			clickUtil(title) {
				var _this = this;
				switch(title) {
					case 'close': // 关闭
						_this.$emit('clickDraw', title) // 将工具条事件告诉父组件
					break;
					case 'del': // 清空画布
						_this.clear()
					break;
					case 'back':// 撤销
					break;
					case 'go': // 前进
					break;
					case 'save': // 保存
						uni.showLoading({
							title: '保存中...',
						})
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: _this.canvas_w,
							height: _this.canvas_h,
							destWidth: _this.canvas_w,
							destHeight: _this.canvas_h,
							canvasId: 'canvas-id',
							success:res => {
								_this.$uapi.apifile('api/v1/upload',{file:res.tempFilePath}).then(res=>{
									var result = JSON.parse(res.data);
									if(result.code == 200 && result.data.fileUrl) {
										var url = result.data.fileUrl;
										if (_this.type == 'test' || (_this.type == 'exam' && _this.unid)) {
											var tips = '添加成功';
											let obj = {
												usr_id: _this.stuId,
												notes_content: url,
												sid: _this.sid, //科目ID
												course_key: _this.keyId, //试题ID或试卷ID
												notes_title: _this.type, //试题或试卷名称
											}
											if(_this.unid) {
												obj.unid = _this.unid;
												tips = '修改成功';
											}
											if(_this.type == 'test') { //试题
												obj.notes_type = 1;
												obj.question_type_id = _this.question_typeid; //题型ID
											} else {
												obj.notes_type = 2;
												obj.kind_type_id = _this.kind_type_id; //题型ID
											}
											_this.$kbapi.apiPost('mobile/notes/save', obj).then(res => {
												if (res.data.code == 200) {
													uni.showToast({title: tips})
													if(_this.unid) {
														setTimeout(() => {
															_this.$emit('clickDraw', url) // 将工具条点击事件告诉父组件进行关闭画布
														}, 1000)
													} else {
														setTimeout(() => {
															_this.$emit('clickDraw', title) // 将工具条点击事件告诉父组件进行关闭画布
														}, 1000)
													}
												} else {
													uni.showToast({title: res.data.message, icon: 'none'})
												}
											})
										} else {
											uni.setStorageSync('imgbase', url)
											_this.$emit('clickDraw', title) // 将工具条点击事件告诉父组件进行关闭画布
										}
									} else {
										uni.showToast({
											title: '保存失败',
											icon: 'none'
										})
									}
									uni.hideLoading()
								})
							},
						},this)
					break;
				}
			},
			// 画布事件 - 开始
			start(event) {
				this.context.setLineWidth(5) // 线宽度，每次点击重新设置一下宽度，否则会变细
				// 获取起点位置
				xyArr.push({
					move_x: event.touches[0].x,
					move_y: event.touches[0].y
				})
			},
			// 画布事件 - 移动
			move(event) { 
				// 获取移动位置/
				xyArr.push({
					move_x: event.touches[0].x,
					move_y: event.touches[0].y
				})
				// 确保有起点坐标 和 线坐标
				if (xyArr.length >= 2) {
					this.drawing()
				}
			},
			// 画布事件 - 触摸结束
			end(event) {
				xyArr = []// 清空上一次的起点
			},
			// 画布事件 - 进行绘制
			drawing() {
				this.context.moveTo(xyArr[0].move_x, xyArr[0].move_y) // 创建起点 参数1 / 2 表示起点从left:10 从top:10 来作为起点
				this.context.lineTo(xyArr[1].move_x, xyArr[1].move_y) // 创建线条 参数1 表示线条的宽度 参数2表示 距离top顶部位置
				this.context.stroke() // 开始将上面的线进行填充
				this.context.draw(true) // true表示连接上一次的内容，false则不会
				xyArr.shift() // 每次画完将上一次的轨道进行清空，避免累加
			},
			// 画布事件 - 清除画布内容
			clear() {
				var _this = this;
				uni.showModal({
					title: '清除画布',
					content: '画布内容一旦清除将无法恢复,\n确定要清除吗？',
					confirmColor: '#FF9900',
					success:function(res){
						if(res.confirm) {
							_this.context.clearRect(0, 0, _this.canvas_w, _this.canvas_h)
							_this.context.draw();
						}
					}
				})
			},
			// 网络图片转base64
			urlTobase64(url) {
				var toBase64Url;
				var _this = this;
				uni.request({
					url: _this.bimg,
					method: 'GET',
					responseType: 'arraybuffer',
					success: async res => {
						let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
						toBase64Url = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
						uni.setStorageSync('imgbase', toBase64Url)
						_this.Instance();
					}
				});
			},
			Instance() {
				// 实例化画布
				this.context = uni.createCanvasContext('canvas-id', this)
				this.context.setFillStyle('#000') // 设置线颜色
				this.context.setLineWidth(5) // 线宽度
				this.context.setLineCap('round') // 设置线两端端点样式更加圆润
				this.context.setLineJoin('round') // 设置两条线连接处更加圆润
				let _this = this
				// 获取系统设备信息的宽度和高度 后续可用到如清空画布等
				uni.getSystemInfo({
					success(res) {
						_this.canvas_w = res.windowWidth
						_this.canvas_h = res.windowHeight
					}
				})
				let reg = /[.]png/g
				// 延迟1秒显示，否则会出现偶尔显示不出来
				if ((uni.getStorageSync('imgbase') && !reg.test(uni.getStorageSync('imgbase')))) {
					setTimeout(() => {
						_this.context.drawImage(uni.getStorageSync('imgbase'),0,0,_this.canvas_w,_this.canvas_h) // 将草稿图挂上去
						_this.context.draw()
						uni.hideLoading();
						uni.removeStorageSync('imgbase')
					},1000)
				}
			}
		},
		mounted() {
			if(this.bimg) {
				uni.showLoading({
					title: '加载中...'
				})
				this.urlTobase64();
			} else {
				this.Instance();
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 工具条
	.cs-draw-util{
		position: fixed;
		display: flex;
		height: 88upx;
		padding: 0 60upx;
		left: 0; right:0;
		z-index: 2;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2upx solid #E5E5E5;
		background: #FFFFFF;
	}
	/* #ifdef APP-PLUS || MP-WEIXIN */
	.cs-draw-util{
		top: 0;
	}
	/* #endif */
	
	/* #ifdef H5 */
	.cs-draw-util{
		top: 86upx;
	}
	/* #endif */
	
	// 画布样式
	.cs-draw-canvas-x{
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 1;
		top: 0;
		left: 0;
		background: #FFFFFF;
	}
	.cs-draw-canvas{
		width: 100%;height: 100%;
	}
	
	// 图标
	.icon_opertion{
		font-size: 40upx;
		color: #666666;
	}
</style>
